<template>
  <div class="item-box" ref="item_box" :style="[{ backgroundImage: `url(${backgroundImage})` }, styles]">
    <div class="top flex_between">

      <span v-if="typeof title=='string'" @click="titleClick">
        {{ title }}
      </span>
      <div v-else>

        <span :style="{color:type=='grade'?'#00D2FF':''}" style="cursor: pointer;" @click="gradeClick(item)" v-for="(item,index) in title" :key="index">{{item.name}}{{index!=title.length-1?'-':''}}</span>
      </div>

      <div class="select-box">
        <slot name="select"></slot>
      </div>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
  import setRem from "@/utils/px2remref";
  export default {
    components: {},
    name: "Index",
    props: {
      title: {
        type: [String, Array],
        default: "",
      },
      type: {
        type: String,
        default: 'grade'
      },
      backgroundImage: {
        type: String,
        default: require("@/assets/images/licang/kuang/k6.png"),
      },
      width: {
        type: [String, Number],
        default: "900",
      },
      height: {
        type: [String, Number],
        default: "550",
      },
      styles: {
        type: Object,
        default: function () {
          return { margin: "0 0px 20px 0", float: "left" };
        },
      },
    },

    created() {

    },
    mounted() {
      this.initStyle();
    },
    methods: {
      gradeClick(item){
        this.$emit('gradeClick', item)
      },
      titleClick() {
        this.$emit('gradeClick', this.title)
      },
      initStyle() {
        //   this.$nextTick(() => {
        //     this.$refs.item_box.style.width =
        //       (Number(this.width) * setRem()) / 16 + "px";
        //     this.$refs.item_box.style.height =
        //       (Number(this.height) * setRem()) / 16 + "px";
        //   });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .item-box {
    width: 915px;
    height: 620px;
    background-size: 100% 100%;
    padding: 0 16px 16px 16px;

    .top {
      width: 100%;
      height: 52px;
      padding: 0 16px 0 18px;



      span {
        font-size: 26px;
        font-family: PingFang SC-Bold;
        font-weight: 700;
        text-align: left;
        color: #ffffff;
        letter-spacing: 1.12px;
        margin-top: 1.5px;
      }

      .select-box {
        width: auto;
        display: flex;
        align-items: center;
        height: 100%;
        margin-top: 1px;
      }
    }


    .content {
      width: 100%;
      height: calc(100% - 50px);
      /* padding-top: 14px; */
      padding: 14px 16px 10px;
      /* background-color: red; */
    }

    @media (max-width: 2600px) {
      .top {
        height: 3.6vh;

        span {
          font-size: 30px;
        }
      }

      .content {
        height: calc(100% - 3.6vh);
      }
    }
  }
</style>